<template>
  <div class="raceNotice">
    <div class="r-head">
      <div class="r-search">
        <n-ellipsis
          style="max-width: 80%"
          :tooltip="false"
          v-show="!noticeShow"
        >
          比赛公告
        </n-ellipsis>
        <n-ellipsis style="max-width: 80%" :tooltip="false" v-show="noticeShow">
          {{ title }}
        </n-ellipsis>
      </div>
      <div class="toFlash">
        <n-button
          type="primary"
          size="small"
          round
          @click="flashNotice"
          v-show="!noticeShow"
        >
          <template #icon> <i class="iconfont icon-shuaxin"></i> </template>
          刷新
        </n-button>
        <n-button
          type="primary"
          size="small"
          round
          @click="backNotice"
          v-show="noticeShow"
        >
          <template #icon> <i class="iconfont icon--shangyibu"></i> </template>
          返回
        </n-button>
      </div>
    </div>
    <div class="r-body" v-show="!noticeShow">
      <noticeComponents
        v-for="(item, index) in notices.records"
        :notice="item"
        @click="showContent(item)"
      ></noticeComponents>
    </div>
    <div class="r-bottom" v-show="!noticeShow">
      <el-pagination
        class="pagination"
        :page-sizes="[20, 50, 99]"
        background
        small
        layout="prev, pager, next,sizes"
        :total="Number(notices.total)"
        v-model:current-page="noticeParame.pageNum"
        v-model:page-size="noticeParame.pageSize"
      />
    </div>
    <div class="r-notice-body" v-show="noticeShow">
      <v-md-editor
        ref="markdown"
        :mode="'preview'"
        :height="'auto'"
        v-model="content"
      ></v-md-editor>
    </div>
  </div>
</template>

<script setup>
import useStore from "@/store";
import { ref, onMounted, watch, defineExpose } from "vue";
import noticeComponents from "./noticeComponents/noticeComponetns.vue";
import { useRoute } from "vue-router";
import { getRaceNoticeAPI } from "@/api/ojAPI/ojAPI.js";

onMounted(() => {
  getNotice();
});

const store = useStore();
const route = useRoute();
const noticeParame = ref({
  pageSize: 20,
  pageNum: 1,
});

const notices = ref({
  records: [],
  total: 10,
});
const noticeShow = ref(false);
const title = ref("");
const content = ref("");
const deboundTime = ref(null);
const flash = () => {
  if (document.querySelector(".icon-shuaxin").classList.contains("flash")) {
    return;
  }
  document.querySelector(".icon-shuaxin").classList.add("flash");
};
const noFlash = () => {
  document.querySelector(".icon-shuaxin").classList.remove("flash");
};
const flashNotice = () => {
  flash();
  if (deboundTime.value) {
    clearTimeout(deboundTime.value);
  }
  deboundTime.value = setTimeout(() => {
    getNotice();
    noFlash();
  }, 880);
};
const showContent = (notice) => {
  title.value = notice.title;
  content.value = notice.content;
  noticeShow.value = true;
};
const getNotice = async () => {
  const data = {
    pageNum: noticeParame.value.pageNum,
    pageSize: noticeParame.value.pageSize,
    cid: route.params.rid,
    like: "",
  };

  await getRaceNoticeAPI(data).then((res) => {
    if (res.data.code === 200) {
      notices.value = res.data.data;
    }
  });
};
const backNotice = () => {
  title.value = "";
  content.value = "";
  noticeShow.value = false;
};
watch(noticeParame.value, () => {
  if (deboundTime.value) {
    clearTimeout(deboundTime.value);
  }
  deboundTime.value = setTimeout(() => {
    getNotice();
  }, 300);
});
defineExpose({
  getNotice,
});
</script>

<style lang="less" scoped>
.raceNotice {
  width: 100%;
  padding: 10px;
  padding-top: 0px;
  .r-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 3px;
    border-bottom: 1px solid #3cc661;
    .r-search {
      width: 80%;
      margin-right: 10px;
      font-size: 1.525em;
      padding-left: 5px;
      font-weight: 600;
    }
    .toFlash {
      margin-right: 20px;
    }
    .flash {
      animation: loader 0.88s infinite cubic-bezier(0.3, 0.5, 0.7, 1);
    }
    @keyframes loader {
      0% {
        transform: rotate(0deg);
        filter: hue-rotate(360deg);
      }
      100% {
        transform: rotate(360deg);
        filter: hue-rotate(0deg);
      }
    }
  }
  .r-body {
    width: 100%;
    height: 65vh;
    overflow: hidden;
    overflow-y: auto;
    padding-bottom: 10px;
  }
  .r-bottom {
    margin: 0 auto;
    margin-top: 10px;
    display: flex;
    justify-content: center;
  }
  ::v-deep(.n-content) {
    border-radius: 7px;
    .el-dialog__body {
      padding: 10px 20px 20px 20px;
    }
    .r-content-title {
      font-size: 18px;
      padding-bottom: 10px;
      padding-left: 4px;
      font-weight: 600;
    }
    .v-md-editor {
      border-radius: 10px;
      background-color: #d7d7d78a;
      .github-markdown-body {
        padding: 16px 20px;
        p {
          font-size: 15px;
          font-weight: 400;
        }
      }
    }
  }
  .r-notice-body {
    width: 100%;
    margin-top: 10px;
    ::v-deep(.github-markdown-body) {
      background-color: #807b7b21;
      border-radius: 10px;
    }
  }
}
</style>
